<template>
	<view class="login-container">
		<view class="login-card">
			<view class="login-header">
				<view class="logo">
					<text class="logo-icon">🎓</text>
					<text class="brand-name">校园互助+</text>
				</view>
				<text class="subtitle">管理后台</text>
			</view>
			
			<view class="login-form">
				<view class="form-item">
					<input 
						class="form-input" 
						v-model="loginForm.username" 
						placeholder="请输入用户名"
						type="text"
					/>
				</view>
				
				<view class="form-item">
					<input 
						class="form-input" 
						v-model="loginForm.password" 
						placeholder="请输入密码"
						type="password"
					/>
				</view>
				
				<button class="login-btn" @click="handleLogin" :loading="isLoading">
					{{ isLoading ? '登录中...' : '登录' }}
				</button>
			</view>
			
			<view class="login-footer">
				<text class="footer-text">© 2024 校园互助+ 管理后台</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Login',
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			},
			isLoading: false
		}
	},
	methods: {
		async handleLogin() {
			if (!this.loginForm.username || !this.loginForm.password) {
				uni.showToast({
					title: '请输入用户名和密码',
					icon: 'none'
				});
				return;
			}
			
			this.isLoading = true;
			
			try {
				// 模拟登录验证
				await this.mockLogin();
				
				// 保存用户信息到本地存储
				const userInfo = {
					username: this.loginForm.username,
					nickname: this.loginForm.username === 'admin' ? '管理员' : this.loginForm.username,
					userId: 'admin_001'
				};
				
				uni.setStorageSync('userInfo', userInfo);
				uni.setStorageSync('token', 'mock_token_' + Date.now());
				uni.setStorageSync('userId', userInfo.userId);
				
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				});
				
				// 跳转到首页
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/index/index'
					});
				}, 1500);
				
			} catch (error) {
				uni.showToast({
					title: '登录失败',
					icon: 'none'
				});
			} finally {
				this.isLoading = false;
			}
		},
		
		// 模拟登录验证
		mockLogin() {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					// 简单的用户名密码验证
					if (this.loginForm.username === 'admin' && this.loginForm.password === '123456') {
						resolve();
					} else {
						reject(new Error('用户名或密码错误'));
					}
				}, 1000);
			});
		}
	}
}
</script>

<style scoped>
.login-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40rpx;
}

.login-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 60rpx 50rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 480rpx;
	animation: card-fade-in 0.6s ease-out;
}

@keyframes card-fade-in {
	from {
		opacity: 0;
		transform: translateY(40rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-header {
	text-align: center;
	margin-bottom: 60rpx;
}

.logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16rpx;
	margin-bottom: 16rpx;
}

.logo-icon {
	font-size: 60rpx;
}

.brand-name {
	font-size: 40rpx;
	font-weight: 700;
	color: #1f2937;
}

.subtitle {
	font-size: 28rpx;
	color: #6b7280;
	font-weight: 500;
}

.login-form {
	margin-bottom: 40rpx;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-input {
	width: 100%;
	height: 88rpx;
	border: 2rpx solid #e5e7eb;
	border-radius: 16rpx;
	padding: 0 24rpx;
	font-size: 30rpx;
	color: #374151;
	background: #f9fafb;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.form-input:focus {
	border-color: #3b82f6;
	background: #fff;
	box-shadow: 0 0 0 6rpx rgba(59, 130, 246, 0.1);
}

.login-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
	color: #fff;
	border: none;
	border-radius: 16rpx;
	font-size: 32rpx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.3);
}

.login-btn:hover {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 32rpx rgba(59, 130, 246, 0.4);
}

.login-btn:active {
	transform: translateY(0);
}

.login-footer {
	text-align: center;
	margin-top: 40rpx;
}

.footer-text {
	font-size: 24rpx;
	color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.login-card {
		padding: 50rpx 40rpx;
		margin: 20rpx;
	}
	
	.brand-name {
		font-size: 36rpx;
	}
	
	.form-input, .login-btn {
		height: 80rpx;
		font-size: 28rpx;
	}
}
</style>
